import { View, Input, Image, Text } from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, { Component } from 'react';
import './startTask.less';
import giftPackImage from './giftPack.png';
import api from 'api';
export default class RadioBox extends Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      taskComplete: false,
      taskText: ['逛逛会场', '浏览0秒'],
      task: null,
      showTaskModel: false,
      endTimeInstance: null,
    };
  }
  async taskComp() {
    if (this.state.taskComplete && !this.state.endTimeInstance) {
      if (this.state.endTimeInstance) {
        clearInterval(this.state.endTimeInstance);
      }
      this.setState({
        taskComplete: false,
        taskText: ['逛逛会场', '浏览0秒'],
        task: null,
        showTaskModel: false,
        endTimeInstance: null,
      })
      Taro.navigateBack();
    }
  }
  componentDidMount() {
    try {
      let task = Taro.getStorageSync('task');
      if (task) task = JSON.parse(task)
      const pagePath = Taro.getCurrentInstance().router?.path;
      console.log(task, pagePath === task.taskReleaseVO.pagePath, task.taskInfoVO.conditionsType == "0")
      if (task && pagePath === task.taskReleaseVO.pagePath && task.taskInfoVO.conditionsType == "0") {
        this.setState({
          task,
          endTime: task.taskInfoVO.ruleDuration,
          taskText: ['逛逛会场', `浏览${task.taskInfoVO.ruleDuration}秒`],
          showTaskModel: task.taskInfoVO.conditionsType == '0',
          endTimeInstance: setInterval(() => {
            if (this.state.endTime <= 0) {
              this.setState({
                taskComplete: true,
                taskText: ['任务完成', '点击返回'],
                endTime: 0,
                endTimeInstance: null,
              });
              const task = this.state.task
              api.TaskCenterController.completedTask({
                id: task.id
              }).then(() => {
                Taro.showToast({
                  title: `获得${task.taskInfoVO.rewardType == 0 ? task.taskInfoVO.rewardPoints : ""}${["积分", "优惠券", "实物商品"][task.taskInfoVO.rewardType]}${task.taskInfoVO.rewardType == 2 ? "请到我的-我的奖励中填写收货地址":""}`,
                  icon: 'none',
                });
                Taro.removeStorageSync("task")
              })

              clearInterval(this.state.endTimeInstance);

            } else {
              this.setState({
                taskText: ['逛逛会场', `浏览${this.state.endTime}秒`],
                endTime: this.state.endTime - 1,
              });
            }
          }, 1000),
        });
      }
    } catch (error) {
      Taro.removeStorageSync('task');
    }
  }
  componentWillUnmount(): void {
    if (this.state.endTimeInstance) {
      clearInterval(this.state.endTimeInstance);
    }
  }
  render() {
    return (
      <View className={`StartTask ${this.state.showTaskModel ? 'StartTask-show' : ''}`} onClick={() => this.taskComp()}>
        <Image className="StartTask-Icon" src={giftPackImage} />
        <Text className="Text1">{this.state.taskText[0]}</Text>
        <Text className="Text2">{this.state.taskText[1]}</Text>
      </View>
    );
  }
}
